<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/themes/default/easyui.css"/>">
	
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/themes/icon.css"/>">
	
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/reset.css"/>">
	
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/supersized.css"/>">
	
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/login_background_style.css"/>">
		
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/login_styles.css"/>">
	
<script type="text/javascript" 
	src="<c:url value="/js/jquery.min.js"/>"></script>

<script type="text/javascript"
	src="<c:url value="/js/jquery.easyui.min.js"/>"></script>
	
<script type="text/javascript"
	src="<c:url value="/js/easyui-lang-zh_CN.js"/>"></script>
	
<script type="text/javascript"
	src="<c:url value="/js/verificationNumbers.js"/>"></script>
	
<script type="text/javascript"
	src="<c:url value="/js/Particleground.js"/>"></script>	

<script type="text/javascript"
	src="<c:url value="/js/jquery-1.8.0.min.js"/>"></script>
	
<script type="text/javascript"
	src="<c:url value="/js/supersized.3.2.7.min.js"/>"></script>
	
<script type="text/javascript"
	src="<c:url value="/js/supersized-init.js"/>"></script>	
	
<style type="text/css">


@keyframes bluePulse {
from {
     color: #00FF00; 
     text-shadow: 0 0 10px #ebebeb; 
}
50% { 
     color: #ffff00; 
     text-shadow: 0 0 28px #2daebf; 
}
to {
	 color: #00FF00; 
	 text-shadow: 0 0 10px #ebebeb; 
}
}
.cwb {
	animation-iteration-count: infinite;
	animation-name: bluePulse;
	animation-duration: 4s;
	position: relative;
	top:10px;
}

.title{
	transition: 0.5s;
	text-align:center;
	overflow: hidden;
	white-space: nowrap;
	font-size: 55px;
	line-height: 220px;
	font-weight:bold;
	letter-spacing: 15px;
	padding-left: 15px;
	font-family: '楷体';
}
input#J_codetext{
     width: 35%;
     position: absolute;
     right: 100px;
}

canvas#myCanvas.J_codeimg{
     position: relative;
     left: 140px;
     top: -20px;
     width: 100px;
     height: 100px;
 
}
</style>

<script type="text/javascript">
$(document).ready(function() {
	  //验证码
	  createCode();
	});
</script>
        
<body>
	  <div class="webfontCSS title">
		  <span class="cwb">HIS六医院登录系统</span>
	       </div>
	  <div class='login'>
		  <div class='login_title'>
		       <span>账号登录</span>
		           </div>
	  <div class='login_fields'>
		   <div class='login_fields__user'>
		        <div class='icon'>
		             <img src='img/user_icon_copy.png'>
		        </div>
		             <input placeholder='用户名' type='text'>
	  <div class='validation'>
		   <img src='img/tick.png'>
		       </div>     
		 </div>
	  <div class='login_fields__password'>
		   <div class='icon'>
		        <img src='img/lock_icon_copy.png'>
		      </div>
		           <input placeholder='密码' type='password'>
     <div class='validation'>
		  <img src='img/tick.png'>       
		     </div>	      
		 </div>	    
	 <div class='login_fields__password'>
		 <div class='icon'>
		      <img src='img/login_yzm.png'>
		          </div>
     <div class="checkcode">
		  <input  type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
			   <canvas  class="J_codeimg" id="myCanvas" onclick="createCode()">
			          </canvas>
			                 </div>
			           </div>
	 <div class='login_fields__submit'>
		  <input id="one" value="登录"  type='submit' style="vertical-align: middle; width: 124px" onClick="validate();">
		        <div class='forgot'>
		            <a href='#'>忘记密码?</a>
		               </div>
		    	 </div>
	       </div>
     </div>
	  
	<script>
	$('input[type="submit"]').click(function () {
	    $('.login').addClass('test');
	    setTimeout(function () {
	        $('.login').addClass('testtwo');
	    }, 300);
	    setTimeout(function () {
	        $('.authent').show().animate({ right: -320 }, {
	            easing: 'easeOutQuint',
	            duration: 600,
	            queue: false
	        });
	        $('.authent').animate({ opacity: 1 }, {
	            duration: 200,
	            queue: false
	        }).addClass('visible');
	    }, 500);
	    setTimeout(function () {
	        $('.authent').show().animate({ right: 90 }, {
	            easing: 'easeOutQuint',
	            duration: 600,
	            queue: false
	        });
	        $('.authent').animate({ opacity: 0 }, {
	            duration: 200,
	            queue: false
	        }).addClass('visible');
	        $('.login').removeClass('testtwo');
	    }, 2500);
	    setTimeout(function () {
	        $('.login').removeClass('test');
	        $('.login div').fadeIn();
	    }, 2800);
	    setTimeout(function () {
	        $('.success').fadeIn();
	    }, 3200);
	});
	$('input[type="text"],input[type="password"]').focus(function () {
	    $(this).prev().animate({ 'opacity': '1' }, 200);
	});
	$('input[type="text"],input[type="password"]').blur(function () {
	    $(this).prev().animate({ 'opacity': '.5' }, 200);
	});
	$('input[type="text"],input[type="password"]').keyup(function () {
	    if (!$(this).val() == '') {
	        $(this).next().animate({
	            'opacity': '1',
	            'right': '30'
	        }, 200);
	    } else {
	        $(this).next().animate({
	            'opacity': '0',
	            'right': '20'
	        }, 200);
	    }
	});
	var open = 0;
	$('.tab').click(function () {
	    $(this).fadeOut(200, function () {
	        $(this).parent().animate({ 'left': '0' });
	    });
	});
	</script>
</body>
</html>